<!-- 这是图片详情页左边栏 -->
<template>
  <div>
      <div class="header">
          <img
            src="@/assets/icon1/quanping.svg"
            alt="全屏展示"
            title="全屏展示"
            style="width:20px;"
            @click.prevent="showimg(id)"
            
          >
          <span style="color:#fff;font-size:24px;">1/1</span>
          <img
            src="@/assets/icon1/close.svg"
            alt="关闭"
            title="关闭"
            style="width:20px;"
            @click="back"
          >
      </div>
      <div class="showphoto" style="height:700px;">
    
    <el-carousel :autoplay="false"  trigger="click" height="700px" >
      <el-carousel-item v-for="img in images" :key="img.id" style="text-align:center;">
      
	          
         <img :src="img.src" alt="" preview="actPre" preview-text="我是vpp"  height="600px"
         style="margin-top:20px;">

	     
      </el-carousel-item>
    </el-carousel>
    
  </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      actPre:'1',
      cards:[],
      images : [
         {
          src: require("@/images/1.png"),
          id: 1
        },
        {
          src: require("@/images/2.png"),
          id: 2
        },
        {
          src: require("@/images/3.png"),
          id: 3
        },
        {
          src: require("@/images/2.png"),
          id: 4
        },
        {
          src: require("@/images/1.png"),
          id: 5
        },
        {
          src: require("@/images/3.png"),
          id: 6
        },
       ]
    };
  },

  mounted:function(){
     this.changeRow()
    console.log(this.cards)
  },
  
  methods: {
   changeRow(){
     var rowNum=parseInt(Math.ceil(this.images.length/3))
     var n=0
     for(var i =0; i<rowNum; i++){    
      var rowList=[]
        n =i*3
       for(var j =n; j<(n+3); j++){
         rowList.push(this.images[j])       
       }
       this.cards.push(rowList)
     }
     return
   },
   showimg(id){

   },
   back(){
     this.$router.go(-1)
   }
  }
}

</script>
<style lang='scss' scoped>
.header{
    display: flex;
    justify-content: space-between;
    height: 50px;
    align-items: center;
    margin: 0 20px;
    img {
            cursor: pointer;
            transition: all 0.6s;
          }
          img:hover {
            transform: scale(1.4);
          }
}
 .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }


</style>